<template>
  <div class="main">
    <div class="contain">
      <el-form
        ref="form"
        :rules="rules"
        label-suffix="："
        :model="form"
        label-width="100px"
      >
        <el-form-item label="报修单号" prop="repairId">
          <el-input v-model="form.repairId" placeholder="请输入" disabled />
        </el-form-item>

        <el-form-item label="报修对象" prop="repairDevice">
          <el-input
            v-model="form.repairDevice"
            :disabled="type != 'add'"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="报修位置" prop="repairLocation">
          <el-input
            v-model="form.repairLocation"
            :disabled="type != 'add'"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="报修内容" prop="repairContent">
          <el-input
            v-model="form.repairContent"
            :disabled="type != 'add'"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="维修状态" prop="repairStatus">
          <el-select
            v-model="form.repairStatus"
            placeholder="请选择"
            style="width: 100%"
            disabled
          >
            <el-option
              v-for="dict in statusList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修方案" prop="repairPlan">
          <el-input
            v-model="form.repairPlan"
            :disabled="type != 'add'"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="分派人" prop="repairUser">
          <el-select
            v-model="form.repairUser"
            placeholder="请选择"
            :disabled="type != 'send'"
            style="width: 100%"
          >
            <el-option
              v-for="item in users"
              :key="item.userId + ''"
              :label="item.userName"
              :value="item.userId + ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="cancel"> 返回 </el-button>
        <el-button type="primary" @click="save" v-if="type == 'send'"> 分派 </el-button>
        <el-button type="primary" @click="save" v-if="type == 'resolve'"> 解决 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  standardList,
  standardDel,
  repairAdd,
  repairDetail,
  repairDispatch,
  repairSolve,
} from "@/api/system/device";
import {} from "@/api/article";
import moment from "moment";
import { userList } from "@/api/system/user";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  filters: {
    // statusList: function (value) {
    //   switch (value) {
    //     case "1":
    //       return "已提交";
    //     case "2":
    //       return "已分派";
    //     case "3":
    //       return "已解决";
    //   }
    // },
  },
  data() {
    return {
      form: {
        repairId: "BX" + moment().format("YYYYMMDDHHmmss"),
        repairStatus: "1",
      },
      rules: {
        deviceName: [{ required: true, message: "请输入", trigger: "blur" }],
        deviceId: [{ required: true, message: "请输入", trigger: "blur" }],
        deviceModule: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
      deviceList: [
        { value: "1", label: "数据1" },
        { value: "2", label: "数据2" },
        { value: "3", label: "数据3" },
        { value: "4", label: "数据4" },
      ],
      type: "add",
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      token: {
        Authorization: getToken(),
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      modelClass: null,
      visible: false,
      list: [],
      listLoading: false,
      total: 0,
      limit: 10,
      curPage: 1,
      listData: [],
      studentName: "",
      // studentClass: '',
      phonenumber: "",
      work: "",
      page: this.$route.query.page,
      personClass: "",
      classList: [],
      userId: null,
      imageUrl: "",

      imageName: null,
      title: "",
      statusList: [],
      id: this.$route.query.id,
      users: [],
    };
  },
  created() {
    // this.getClassList();
  },
  mounted() {
    const app = document.getElementById("app");
    app.style.transform = "none";
    app.style.width = "100%";
    app.style.height = "auto";
    app.style.left = "0";
    this.form = {
      repairId: "BX" + moment().format("YYYYMMDDHHmmss"),
      repairStatus: "1",
    };
    this.getDicts("repair_status").then((res) => {
      this.statusList = res.data;
    });
    this.userList();
    // this.getList();
    this.type = this.$route.query.type;
    if (this.id) {
      this.getInfo();
    }
  },
  methods: {
    userList() {
      userList().then((res) => {
        this.users = res.rows;
      });
    },
    getInfo() {
      repairDetail(this.id).then((res) => {
        this.form = res.data;
        if (res.data.repairStatus == "1") {
          this.type = "send";
        } else if (this.form.repairStatus == "2") {
          this.type = "resolve";
        }
      });
    },
    getUserList() {},
    /** 查询用户列表 */
    getList() {
      let params = {
        pageNum: this.curPage,
        pageSize: this.limit,
      };
      this.listLoading = true;
      standardList(params).then((res) => {
        this.listLoading = false;
        if (res.code == 200) {
          console.log("res", res);
          // this.list = res.rows;
          this.list = [{ status: "1" }, { status: "2" }, { status: "3" }];
          this.total = res.total;
          // this.curPage = Number(page);
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageName = res.imageName;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    cancel() {
      // this.$router.push("/repair/list");
      this.$router.go(-1);
    },
    save() {
      let params = {
        ...this.form,
      };
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            params.id = this.form.id;
            if (this.type == "send") {
              repairDispatch(params).then((res) => {
                this.$toast.success(res.msg);
                this.$router.go(-1);
              });
            } else if (this.type == "resolve") {
              repairSolve(params.id).then((res) => {
                this.$toast.success(res.msg);
                this.$router.go(-1);
              });
            }
          }
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    rowClick(row, column, cell) {
      this.modelClass = null;
      this.userId = row.userId;
      this.visible = true;
    },
    getClassList() {
      this.classList = [{ classId: -1, className: "无班级人员" }];
      classList().then((res) => {
        if (res.code == "200") {
          res.rows.forEach((element) => {
            this.classList.push(element);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    del(id) {
      this.$confirm("确定删除该数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        standardDel(id).then((res) => {
          if (res.code == "200") {
            this.$message({ message: res.msg, type: "success" });
            this.getList();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      });
    },
    exportList() {
      let params = {
        studentName: this.studentName,
        // className: this.studentClass,
        phonenumber: this.phonenumber,
        work: this.work,
      };
      this.$confirm("是否确认导出所有角色数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return studentExport(params);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    resetPsw(id) {
      this.$confirm("确定重置该学员密码吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          userId: id,
          password: "123456",
        };
        resetPwd(params).then((res) => {
          if (res.code == "200") {
            this.$message({ message: res.msg, type: "success" });
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      });
    },
    stop(id) {
      studentStop(id).then((res) => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.getList();
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    reset() {
      this.studentName = "";
      this.personClass = "";
      // this.studentClass = ''
      this.phonenumber = "";
      this.work = "";
    },

    preview(id) {
      this.$router.push({
        path: "/studentDetail",
        query: { id: id, page: this.curPage, personClass: this.personClass },
      });
    },

    handleDelete(id) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          testDelete(id).then((res) => {
            if (res.code == "200") {
              this.getList();
              this.$message({ message: res.msg, type: "success" });
            } else {
              this.$message({ message: res.msg, type: "error" });
            }
          });
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    add() {
      this.visible = true;

      this.imageName = null;
      this.imageUrl = null;
    },
    open(type, val) {
      this.$router.push("/repair/add");
      // this.visible = true;
      // this.type = type;
      // if (type === "add") {
      //   this.title = "新增";
      //   this.form = {
      //     inspStdId: "XJBZ-" + moment().format("YYYYMMDDHHmmss"),
      //   };
      // } else if (type === "detail") {
      //   this.title = "详情";
      //   standardDetail(val.id).then((res) => {
      //     this.form = res.data;
      //   });
      // } else if (type === "edit") {
      //   this.title = "编辑";
      //   standardDetail(val.id).then((res) => {
      //     this.form = res.data;
      //   });
      // }
    },
  },
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}
.search {
  display: flex;
  position: relative;
}
.search_info {
  width: 192px;
  height: 40px;
  margin-right: 16px;
}
.searchBtn {
  margin-left: 16px;
  height: 36px;
}
.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}
.pos_right_btn {
  position: absolute;
  right: 0;
}
.opt_font {
  cursor: pointer;
  color: #2e82ff;
}
.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}
.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}
.row {
  display: flex;
  padding-bottom: 12px;
}
.detail_info {
  padding-top: 16px;
}
.info_left {
  display: flex;
}
.info_right {
  display: flex;
  padding-left: 202px;
}
.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 112px;
  margin-right: 16px;
}
.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 150px;
}
.pos_top {
  padding-top: 12px;
}
.detailTable {
  margin-top: 16px;
}
.opt_font {
  color: #1e88e5;
  cursor: pointer;
}
.page_pos {
  text-align: right;
  padding-top: 10px;
}
.backBtn {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* max-height: calc(100% -30px); */
  /* max-width: ; */
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  height: 700px;
  overflow-y: auto;
  padding-top: 0;
}
.tab {
  display: flex;
  position: absolute;
  right: 32px;
  top: 14px;
}
.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  margin-right: 16px;
}
.change {
  border: 1px solid #f56c6c;
  color: #f56c6c;
}
.listTable {
  margin-top: 17px;
}
.out {
  position: absolute;
  right: 0;
}
.footer {
  text-align: center;
  margin-top: 30px;
}
.point {
  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #000;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 自定义文本按钮的样式 */
.red-text-button {
  color: red; /* 设置文本颜色为红色 */
}
.contain {
  /* width: 1000px; */
  margin-top: 80px;
}
.main {
  display: flex;
  justify-content: center;
}
</style>
